<template>
	<view>
		<scroll-view @scrolltolower="lowerBottom" :scroll-y="modalName==null" class="page"
			:class="modalName!=null?'show':''">
			<cu-custom bgColor="bg-gradual-pink" :isBack="true">
				<block slot="content">教育排查</block>
			</cu-custom>
			<view class="searchtip">
				<uni-search-bar placeholder="请输入教育描述" @confirm="search" v-model="formData.schoolName">
				</uni-search-bar>
			</view>

			<!-- 其他服务 -->
			<!-- <view class="cu-bar bg-white solid-bottom margin-top" :style="[{animation: 'show 0.6s 1'}]">
				<view class="action">
					<text class='cuIcon-title text-yellow'></text>查询条件
				</view>
			</view> -->
			<view class="bg-white chaxun">
				<view class="three text-center">
					<!-- <app-select v-model="type" placeholder="请选择类型" :dict="plan_type" space></app-select> -->
					<mySelect v-model="formData.schoolType" placeholder="请选择学校类型" dictCode="school_type" space></mySelect>
				</view>
				<view class="three text-center">
					<text>总数：{{total}}家</text>
				</view>
				<view v-if="role != 'linkman'" class="three" style="width: 130px;overflow: hidden;overflow-x: auto;">
						<uni-data-picker :border="false" placeholder="所属镇街" v-model="formData.town" :localdata="queryTreeList"
							:map="{text:'departName',value:'id'}" popup-title="请选择所属镇街"></uni-data-picker>
				</view>
			</view>
			<view class="uslist">
				<view class="li animation-slide-bottom"
					v-for="(item,index) in formDataList" @click="getdetail(item.id)" :key="index">
					<view class="left">
						<view class="h6">{{item.schoolName == null ? '' : item.schoolName}}</view>
						<view class="h5">{{item.address == null ? '' : item.address}}</view>
						<view class="h5">学校编码：{{item.schoolCode == null ? '' : item.schoolCode}}</view>
						<view class="h5">{{item.checkStatus == 0 ? '未完成' : '已完成'}}排查<view class="span" v-if="item.checkStatus != 0">({{item.checkTime == null ? '' : item.checkTime}})</view></view>
						<view class="h5">{{item.schoolType == null ? '' : item.schoolType}}</view>
					</view>
					<view class="bottom">
						<view class="one">隐患数：{{item.checkNum}}</view>
						<view class="online"></view>
						<view class="one">已整改：{{item.rectifyNum}}</view>
						<view class="online"></view>
						<view class="one">整改率：{{item.rectifyRate}}</view>
					</view>
				</view>
				<view class="loadingType">{{loadingType == true ?'没有更多数据了!' : '上拉显示更多'}}</view>
			</view>

			<view class="xuanpoint" v-if="role == 'check' || role == 'admin' || role == 'checkauditor'">
				<navigator @click="skip" url="#" hover-class="navigator-hover">
					<view class="uni-link-item">新增</view>
				</navigator>
			</view>



		</scroll-view>

	</view>

</template>

<script>
	import searchinput from '../component/searchinput.vue'
	import drawerShow from '../component/drawer.vue'
	import appSelect from '@/components/my-componets/appSelect.vue'
	import server from '@/api/server.js'
	const plan_type = [{
		text: '日常记录1',
		value: '1'
	}, {
		text: '本周工作',
		value: '2'
	}, {
		text: '下周计划',
		value: '3'
	}];



	export default {
		components: {
			appSelect,
			searchinput,
			drawerShow
		},
		data() {
			return {
				role:'admin',
				queryTreeList:[],
				total: 0,
				loadingType: false,
				modalName: null,
				item: {
					msg: '退出成功'
				},
				plan_type,
				selected: [],
				beginTime: '',
				formDataList: [],
				formDatarel: [],
				formData: {
					schoolName: '',
					schoolType: '',
					town: '',
					pageNo: 1,
					pageSize: 10,
				}
			}
		},
		computed: {
			dateRange() {
				const schoolType = this.formData.schoolType
				const town = this.formData.town
				return {
					schoolType,
					town
				}
			}
		},
		watch: {
			dateRange: {
				handler(newV, oldV) {
					if (newV.schoolType != oldV.schoolType) {
						this.formData.schoolType = newV.schoolType
					} else if (newV.town != oldV.town) {
						this.formData.town = newV.town

					}
					this.getlist()
				}
			}
		},
		onShow() {
			this.getdet()
			this.role = this.$store.getters.role
			this.$nextTick(function(){
				if(this.role == 'linkman'){
					this.formData.town = this.$store.getters.userinfo.departIds
				}
				this.getlist()
			})
		},
		methods: {
			//搜索
			search(){
				this.getlist()
			},
			onReachBottom() {
				console.log('22222222222222222222222222222')
				this.scrolldanger()
			},
			lowerBottom() {
				console.log(1111)
				this.scrolldanger();
			},
			scrolldanger() {


				this.$http.get("/school/page", {
					params: this.formDatarel
				}).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						this.total = res.data.result.total
						if (res.data.result.records.length == 0) { //没有数据
							console.log('1111111111111111111111111111111111111')
							this.loadingType = true;
							return;
						}
						if (res.data.result.total <= 10) {
							this.loadingType = true;
						}
					} else {
						this.$tip.success('获取列表失败!')
					}


					this.formData.pageNo++; //每触底一次 page +1					
					this.formDataList = this.formDataList.concat(res.data.result.records); //将数据拼接在一起
					console.log(this.formDataList)
				})
			},
			getdetail(id) {
				uni.navigateTo({
					// ? 后面加要传的参数， 多个参数用 & 隔开 
					url: '/pages/education/detail?id=' + id
				})
			},
			//跳转
			skip() {
				uni.navigateTo({
					// ? 后面加要传的参数， 多个参数用 & 隔开 

					url: '/pages/education/add?placeType=' + this.formData.schoolType
				})
				console.log(this.formData.placeType)
			},
			//获取列表
			getlist(rel) {
				this.formDataList = []
				this.formData.pageNo = 1
				if (rel) {
					this.formDatarel = rel
				} else {
					this.formDatarel = this.formData
				}
				console.log(this.formDatarel)
				this.scrolldanger()
			},
			getdet() {
				server.queryTreeList({category:4}).then(res => {
					this.$nextTick(function() {
						console.log(res)
						this.queryTreeList = res.data.result
					});
			
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	// /deep/.cu-form-group picker::after {
	// 	top: -14px;
	// }

	.searchtip {
		width: 100%;
	}

	.chaxun {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 16px;
		color: #555;
		padding: 10px 0;
		.three {
			width: 33.33%;
			display: flex;
			justify-content: center;
		}
	}

	.cu-form-group {
		/deep/uni-input {
			width: 70px;
		}
	}

	.uslist {
		.li {
			background: white;
			margin: 5px 5px;
			position: relative;
		}

		.left {
			padding: 15px;

			.h6 {
				font-size: 16px;
				margin-bottom: 5px;
				font-weight: bold;
			}

			.h5 {
				line-height: 22px;
				font-size: 14px;
				color: #908c8c;
				.span{
					display: inline-block;
				}
			}
		}

		.right {
			.h6 {
				position: absolute;
				top: 20px;
				right: 20px;
				border: 1px solid red;
				border-radius: 40px;
				padding: 2px 5px;
				font-size: 12px;
				color: red;
			}
		}

		.bottom {
			display: flex;
			justify-content: space-around;
			padding: 14px 10px;
			border-top: 1px solid #efefef;
			margin: 0 20px;

			.online {
				width: 1px;
				height: 19px;
				background: #efefef;
			}
		}
	}

	// 时间
	.leave_cont .ul {
		padding-left: 30rpx;
	}

	.leave_cont .ul .li {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #efefef;
	}

	.leave_cont .ul .li text {
		padding: 40rpx 0;
		font-size: 34rpx;
		font-family: '黑体';
	}

	.leave_cont .ul .li .flex1 {
		flex: 1;
		text-align: right;
		padding-right: 25rpx;
		color: #999999;
		font-size: 32rpx;
	}

	.date {
		height: 42rpx;
	}

	// 时间
	.xuanpoint {
		position: fixed;
		bottom: 20px;
		right: 20px;
		width: 50px;
		height: 50px;
		background: #0000007d;
		border-radius: 50%;
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
	}

	.goods {
		.h5 {
			.span {}
		}
	}

	.list-box .main .item {
		padding-bottom: 5px;
		border-bottom: #eee solid 1px;
		padding-right: 8px;
	}

	/deep/.three .cu-form-group .picker,/deep/.selected-area {
		font-size: 16px;
		color:#555 !important
	}

	// /deep/.cu-form-group uni-picker::after {
	//     top: -12px!important;
	// }
	.page,
	scroll-view {
		padding-bottom: 100px;
	}
	.three /deep/.input-value{
		font-size: 18px;
		color:#555!important;
	}
</style>
